<template>
	<view class="wrapper">
		<!-- <uni-data-picker ref="picker" :map="{text:'cityName',value:'cityCode'}" placeholder="请选择所在地区"
			popup-title="请选择所在地区" :localdata="cities" v-model="classes" @change="onchange" @nodeclick="onnodeclick"
			@popupopened="onpopupopened" @popupclosed="onpopupclosed">
		</uni-data-picker> -->
		<next-indexed-xlist :dataList="cities" :showAvatar="false" @itemclick="itemclick"></next-indexed-xlist>
		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				time: 1.5,
				cities: [],
				classes: ''
			}
		},
		onLoad() {
			let that = this
			this.getCities()

		},
		methods: {
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e.detail.value);
				if (e.detail.value.length == 2) {
					this.itemclick({
						name: e.detail.value[1].text,
						id: e.detail.value[1].value
					})
				}
			},
			// 城市列表
			getCities() {
				let that = this
				this.$http('/api/getCities', {

				}).then(r => {
					this.cities = r.data.map(c => {
						return {
							name: c.cityName,
							id: c.cityCode,
							children: c.areas
						}
					})
					// this.$refs.picker.show()
					setTimeout(() => {
						that.loading = false
					}, 1000)
					if (this.city == '') {
						this.setCity({
							name: this.cities[0].cityName,
							id: this.cities[0].cityCode
						})
					}

				})
			},
			// 选择某个个城市
			itemclick(e) {
				this.setCity(e)
				this.back(1)
			},
		}
	}
</script>

<style>

</style>